<!-- The view to map sale_program/examination_type with service -->
<script type="text/javascript" src="{$base_dir}js/selectboxes.js"></script>

<script type="text/javascript">
{literal}
    $(document).ready(function() {
        loadMappedService();
    }); 
{/literal}
</script>

<br />
<form id="map_service_form" name="map_service_form">
<div class="form_container" style="width: 700px;">
    <div>
        <span id="status_message" style="font-style: italic; color: red;"></span>
    </div>
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td colspan="3" class="field" style="text-transform: uppercase">{translate}Select services{/translate} </td>
        </tr>
        <tr>
            <td class="label">{translate}Composite service_1{/translate}</td>
            <td class="field" colspan="2">
                <select id="composite_service" name="composite_service" style="width: 400px" 
                    onchange="javascript:loadMappedService();">
                    {html_options options=$csList}
                </select>
            </td>                                
        </tr>
        <tr>
            <td class="label">{translate}Service group{/translate}</td>
            <td class="field" colspan="2">
                <select id="serviceGroup" name="serviceGroup" onchange="getServices();" style="width: 400px">
                	<option value=""> - - {translate}Select service group{/translate} - -</option>
                	
					{foreach from = $serviceGroupList item = service_group}
                    <option value="{$service_group.service_group_id}">{$service_group.name}</option>
					{/foreach}
                </select>
            </td>
        	
        </tr>
        
        <tr id="services">
        </tr>
        
        <tr>
        	<td class="label">{translate}Required{/translate}</td>
        	<td class="field">
        		
        		<input id="required" name="required" type="radio" value="yes" checked="checked" />{translate}Yes{/translate} 
                <input id="required" name="required" type="radio" value="no" />{translate}No{/translate}
        	</td>
        	<td width="100px">
                <div id="addService" style="width: 100px;" align="right">
                    <a class='imgBtn' href="javascript:addService();">
                        <img title='{translate}Add service{/translate}' src="{$base_uri}/images/add.png"/ alt="{translate}Add{/translate}">
                    </a>
                </div>
                
                <div id="serviceBarLoading" style="display: none;">
                        <img src="{$base_uri}images/ajax-loader.gif"/>
                </div>
            </td>
        </tr>

        <!-- Table of mapped service list -->
        <tr>
            <td colspan="3">
	            <table id="mapped_service_list" cellspacing="0" cellpadding="0" class="grid" width="650px">
	                <thead>
	                    <tr>
	                        <th class="first" width="250px">{translate}Service name{/translate}</th>
	                        <th  width="170px">{translate}Required{/translate}</th>
	                        <th  class='last'>&nbsp;</th>
	                    </tr>
	                </thead>
	                <tbody>
	                </tbody>
	            </table>
            </td>
        </tr>
                
        <tr>
            <td colspan="3">
                <div align="right" style="padding-top: 10px;">
                    <div id="btn_save">
                        <a id="button_save" class="button_link" href="javascript:saveChoseService();">
                            {translate}Save{/translate}
                        </a>
                    </div>
                    <div id="barLoading" style="display:none;">
                        <img src="{$base_uri}images/ajax-loader.gif"/>
                    </div>
                </div>                  
            </td>
        </tr>    
    </table>
    
</div>
</form>